import React from 'react'
import {NavLink, Switch, Route, Redirect, withRouter} from 'react-router-dom'
import RouteComp1 from './pages/RouteComp1'
import RouteComp2 from './pages/RouteComp2'

import './App.css'
/* 
  2种组件
    函数组件: 不能有state
    类组件: 可以有state
  类组件的生命周期
    初始化(挂载): componentWillMount => render => componentDidMount
    更新: componentWillUpdate => render => componentDidUpdate
    卸载: componentWillUnmount => componentDidUnmount
  组件间通信:
    props: 实现父子组件间通信
      函数: 子向父通信
      非函数: 父向子通信
    pub-sub/redux: 实现任意组件间通信
  2种路由跳转方式:
    1) 声明式: <NavLink> / <Link>
    2) 编程式: props.history.push/replace()
  向路由组件传递数据的方式
    1). params参数
    2). query参数(有点麻烦, 需要进一解析才可以用)
    3). props  (路由使用的render)
    4). state (1. 必须history模式, 2. 编程式路由导航)
*/
class App extends React.Component {

  render () {


    return (
      <div>
        <h2>App</h2>
        <NavLink to="/rc1">路由组件1111</NavLink>
        <NavLink to="/rc2/2?count2=3" style={{margin: 10}}>路由组件2222</NavLink>
        <button onClick={() => this.props.history.push('/rc2/3?count2=4', {count3: 5})}>跳转去2222</button>
        <hr />
        <Switch>
          {/* 
            当访问项目根路径时, 直接跳转到/rc1
          */}
          <Redirect from="/" exact to="/rc1"/>
          <Route path="/rc1" component={RouteComp1}></Route>
          <Route path="/rc2/:count1" component={RouteComp2}></Route>
          {/* 
            只要上面没有匹配, 直接匹配它
            render指定要显示的页面
          */}
          <Route render={() => <h2>404页面</h2>}></Route>
        </Switch>
      </div>
    )
  }
}

export default withRouter(App)